<template>
  <div style="width: 100%; height: 100%">
    <Echarts class="echarts-box" :options="option" />
  </div>
</template>

<script>
import Echarts from "../../../../component/ECharts";
import isNil from "ramda/src/isNil";

export default {
  name: "TwiceLine",

  components: {
    Echarts,
  },

  props: {
    xAxisData: Array,
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    MonitorTypeId: {
      type: Number,
    },
    firstLevel: {
      type: [Number, String],
    },
    secondLevel: {
      type: [Number, String],
    },
    thirdLevel: {
      type: [Number, String],
    },
  },

  computed: {
    markLineList() {
      return [
        {
          name: "红色预警",
          color: "red",
          labelPosition: "right",
          value: this.firstLevel,
        },
        {
          name: "橙色预警",
          color: "orange",
          labelPosition: "middle",
          value: this.secondLevel,
        },
        {
          name: "黄色预警",
          color: "yellow",
          labelPosition: "start",
          value: this.thirdLevel,
        },
        {
          name: "蓝色预警",
          color: "blue",
          labelPosition: "right",
          value: this.forthLevel,
        },
      ];
    },
    option() {
      const datas = this.data
        .map((item) => item.data.flat())
        .flat()
        .concat([this.firstLevel, this.secondLevel, this.thirdLevel])
        .filter((item) => !isNil(item));
      const min = Math.min(...datas);
      const max = Math.max(...datas);

      return {
        color: ["#00FFFF", "#71669e", "#00FF7F", "#FAFAD2"],
        tooltip: {
          trigger: "axis",
          formatter: (series) => {
            return [
              series[0] && series[0].axisValue,
              ...this.markLineList
                .filter((item) => !isNil(item.value))
                .map(
                  (item) =>
                    `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                      item.color
                    };"></span>${item.name}: ${item.value.toFixed(2)}`
                ),
              ...series.map(
                (item) =>
                  `${item.marker}${item.seriesName}: ${item.value.toFixed(2)}`
              ),
            ].join("<br>");
          },
        },
        grid: {
          top: "8%",
          bottom: "24%",
          left: "8%",
          right: "9%",
          containLabel: false,
        },
        legend: {
          show: true,
          top: 0,
          right: 12,
          itemWidth: 24,
          itemHeight: 10,
          itemGap: 24,
          icon: "roundRect",
          textStyle: {
            color: "rgba(255, 255, 255, 0.6)",
          },
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(0, 167, 255, 0.36)",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            color: "#C1C3CA",
          },
          data: this.xAxisData,
        },
        yAxis: [
          {
            min: Math.ceil(min - (max - min) / 1.5),
            max: Math.ceil(max + (max - min) / 5),
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                type: "dashed",
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 167, 255, 0.36)",
              },
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "#C1C3CA",
            },
          },
        ],
        series: this.data
          .map((item) => ({
            name: item.name,
            type: "line",
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            data: item.data,
          }))
          .concat(
            this.markLineList.map((item) => ({
              type: "line",
              name: item.name,
              color: item.color,
              markLine: {
                symbol: "none",
                data: item.value && [
                  {
                    yAxis: item.value,
                    name: item.name,
                    lineStyle: {
                      type: "solid",
                      color: item.color,
                    },
                    label: {
                      show: false,
                    },
                  },
                ],
              },
            }))
          ),
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts-box {
  width: 100%;
  height: 100%;
}
</style>
